<div class="vertical-scroll">
    <div class='vertical-thumb'></div>
</div>
<!--edit ad ---select creative Modal -->
<div class="modal fade" id="selectslogan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{i18n-selectCreative}}</h4>
            </div>
            <div class="modal-body">
                <button class="btn btn-default" id="btn-advance">
                    <span class="hidden">{{i18n-closeFilter}}<i
                            class="glyphicon glyphicon-menu-up"></i></span>
                    <span class="btn-advance-text">{{i18n-openFilter}}
                    </span>
                    <span>
                        <i class="glyphicon glyphicon-menu-down"></i>
                    </span>
                </button>
                <ul class="list-group">
                    <li class="list-group-item">
                        <strong>{{i18n-appLabels}}</strong>
                        <select class="dia-app" multiple style="width:400px;"></select>
            <span class="square-priority-label">
            <a href="javascript:;" class="square-priority"> &nbsp;&nbsp;
                <span>{{i18n-imageAlignment}}</span>
                &nbsp;&nbsp;<i class="fa fa-long-arrow-up"></i></a>
            </span>
                    </li>
                </ul>
                <ul class="list-group collapse" id="dialog-advance">
                    <li class="list-group-item">
                        <strong>{{i18n-languageLabels}}</strong>
                        <select class="dia-lang" multiple></select>
                    </li>
                    <li class="list-group-item">
                        <strong>{{i18n-genderLabels}}</strong>

                        <div class="dia-gender input-drop dropdown ndp-drop-wrapper"></div>
                    </li>
                </ul>
                <div class="pic-pool">
                    <select class="filter filter-tool"></select>
                    <ul class="nav nav-pills filter-tool" role="tablist">
                        <li><a><strong>{{i18n-sort}}</strong></a></li>
                        <li role="presentation" class="active">
                            <a aria-controls="date" role="tab" data-toggle="tab" type="createTime"
                               data-title="{{i18n-date}}"
                               data-sort-title="{{i18n-dateFromNearToFar}}">{{i18n-dateFromNearToFar}}</a>
                        </li>
                        <li role="presentation">
                            <a aria-controls="spent" role="tab" data-toggle="tab" type="spent"
                               data-title="{{i18n-cost}}"
                               data-sort-title="{{i18n-costFromHighToLow}}">{{i18n-aacost}}</a>
                        </li>
                        <li role="presentation">
                            <a aria-controls="results" role="tab" data-toggle="tab" type="results"
                               data-title="{{i18n-install}}"
                               data-sort-title="{{i18n-installFromHighToLow}}">{{i18n-install}}</a>
                        </li>
                        <li role="presentation">
                            <a aria-controls="ctr" role="tab" data-toggle="tab" type="ctr" data-title="CTR"
                               data-sort-title="{{i18n-CTRFromHighToLow}}">CTR</a>
                        </li>
                    </ul>
                    <ul class="pics-box"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pre hidden">{{i18n-pre}}</button>
                <button type="button" class="btn btn-primary">{{i18n-confirm}}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>
    </div>
</div>
<!--edit ad ---select creative--video-- Modal -->
<div class="modal fade" id="selectVideoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{i18n-selectVideo}}</h4>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <strong>{{i18n-appLabels}}</strong>
                        <select class="dia-video-app" multiple style="width:400px;"></select>
                    </li>
                </ul>
                <div class="pic-pool">
                    <ul class="vid-list-box"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary hidden">{{i18n-next}}</button>
            </div>
        </div>
    </div>
</div>
<!-- 视频播放 -->
<div class="modal fade" id="preview-player-video-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div align="center" class="embed-responsive embed-responsive-16by9">
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="../src/css/pages/management.css">
<!-- <section id="ribbon">
    <ol class="breadcrumb">
        <li>{{i18n-resourceManage}}</li>
        <li class="active">{{i18n-adManage}}</li>
    </ol>
</section>
 -->
<div class="container-fluid management-container">
    <div class="container-fluid fmp-setting" data-seg="setting">
        <table cellpadding="0" cellspacing="0" style="border-collapse: separate;border-spacing:5px;" border="0" width="100%">
            <tr>
                <td align="right" width="3%">
                    <label class="control-label">
                        <strong>{{i18n-product}}</strong>
                    </label>
                </td>
                <td width="15%">
                    <input type="hidden" name="fbConnectionObjectId">
                    <input type="hidden" name="platform">
                    <span class="apps-select select2 select2-container select2-container--default select2-container--below"
                          style="width: 216px;">
                        <span class="selection">
                            <span class="select2-selection select2-selection--single">
                                <span class="select2-chosen">
                                <img style="margin:10px;width: 16px;height: 16px;" src="./imgs/icon_5.png"> <strong>{{i18n-appAndPlatform}}</strong></span>
                    <span class="select2-selection__arrow" role="presentation">
                                    <b role="presentation"></b>
                                </span>
                    </span>
                    </span>
                    </span>
                    <div class="apps-tree">
                        <ul class="ztree"></ul>
                    </div>
                </td>
                <td align="right" width="5%">
                    <label class="control-label">
                        <strong>{{i18n-status}} </strong>
                    </label>
                </td>
                <td width="25%">
                    <select style="width: 100%" name="status">
                        <option value="">{{i18n-allStatus}}</option>
                        <option value="ACTIVE">{{i18n-active}}</option>
                        <option value="PAUSED">{{i18n-paused}}</option>
                        <option value="DELETED">{{i18n-deleted}}</option>
                        <option value="PENDING_REVIEW">{{i18n-pendingReview}}</option>
                        <option value="DISAPPROVED">{{i18n-disapproved}}</option>
                        <option value="PREAPPROVED">{{i18n-preapproved}}</option>
                        <option value="PENDING_BILLING_INFO">{{i18n-pendingBillingInfo}}</option>
                        <option value="CAMPAIGN_PAUSED">{{i18n-campaignPaused}}</option>
                        <option value="ARCHIVED">{{i18n-archived}}</option>
                        <!-- <option value="ADSET_PAUSED">adset暂停</option> -->
                    </select>
                </td>
                <td align="right" width="5%">
                    <label class="control-label">
                        <strong>{{i18n-keywordMatching}}</strong>
                    </label>
                </td>
                <td width="25%">
                    <div class="input-group" style="margin-left: -4px;margin-right: -10px;">
                        <div class="input-group-btn">
                            <select name="category" style="width: 128px">
                                <option value="campaignName">{{i18n-campaignName}}</option>
                                d
                                <option value="adSetName" selected>{{i18n-adSetName}}</option>
                                <option value="adName">{{i18n-adName}}</option>
                                <option value="campaignId">{{i18n-campaignNumber}}</option>
                                <option value="adSetId">{{i18n-adSetNumber}}</option>
                                <option value="adId">{{i18n-adNumber}}</option>
                            </select>
                        </div>
                        <input class="form-control search-key" type="text" value="" placeholder="{{i18n-searchHolder}}"
                               name="search-key" style="border: 1px solid #aaa; height: 35px;">
                    </div>
                </td>
                <td width="10%">&nbsp;</td>
            </tr>
            <tr style="height: 1px;">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td align="right">
                    <label class="control-label">
                        <strong>{{i18n-account}}</strong>
                    </label>
                </td>
                <td>
                    <div class="app-accounts ndp-drop-wrapper" name="accounts" style="width: 216px"></div>
                </td>
                <td align="right">
                    <label class="control-label">
                        <strong>{{i18n-createTime}} </strong>
                    </label>
                </td>
                <td>
                    <input type="hidden" name="createTimeRange-since">
                    <input type="hidden" name="createTimeRange-until">
                    <div class="createTimeRange-range date-range">
                    </div>
                </td>
                <td align="right">
                    <label class="control-label">
                        <strong>{{i18n-dataRange}}</strong>
                    </label>
                </td>
                <td>
                    <input type="hidden" name="statsTimeRange-since">
                    <input type="hidden" name="statsTimeRange-until">
                    <div class="statsTimeRange-range date-range">
                    </div>
                </td>
                <td>
                    <button type="button" class="btn btn-primary btn-query" style="margin-left: 10px;">{{i18n-search}}</button>
                </td>
            </tr>
        </table>
        <hr/>
    </div>
    <div class="container-fluid fmp-monitor" data-seg="monitor">
        <div class="row monitor-control" data-com="control" style="margin-bottom: 5px;overflow: initial;">
            <div class="col-md-5 refresh-time">
            </div>
            <div class="col-md-7">
                <div class="pull-right">
                    <ul class="table-control list-inline">
                        <!--                         <li>{{i18n-generateTable}}</li>
                                                <li>|</li>
                         -->
                        <!-- <li>
                            <a href="javascript:;" class="fold-table">{{i18n-expandCollapse}}</a>
                        </li> -->
                        <li>
                            <a href="javascript:;" class="table-fold "><i class="fa fa-align-justify"></i></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="table-fold open"><i class="fa fa-align-right"></i></a>
                        </li>
                        <li>|</li>
                        <li >
                            <span class="glyphicon glyphicon-filter"></span>
                            <ul class="drop-list" tabindex="-1" id="tableFilter">
                                <li class="drop-one-item apply-item">
                                    <button class="btn btn-default" name="filterBtn">Apply</button>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <select name="per-page" class="per-page">
                                <!-- <option value="1">1</option> -->
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </li>
                        <li>
                            <div class="ndp-page-wrapper" name="plain-page"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="monitor-table" data-com="table">
            <!-- <div class="vertical-scroll">
                <div class='vertical-thumb'></div>
            </div> -->
            <div class="ndp-treable-wrapper"></div>
        </div>
    </div>
    <div class="place-holder"></div>
</div>

